<template>

    <div class="bottom-top">
        <div>

        </div>
        <div class="fourButtons">
            <div class="buttonFather" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 66px;">  
                     <div style="display: flex; align-items: center;">  
                         <el-button :icon="jinPai" style="font-size: 36px;"></el-button>  
                        <h5 style="margin-left: 8px;  font-size: 18px;">百强企业 品质保证</h5>  
                     </div>  
                    <div style="display: flex; align-items: center;">  
                        <el-button :icon="phone1" style="font-size: 36px;"></el-button>  
                        <h5 style="margin-left: 8px; font-size: 18px;" >热线电话 全天在线</h5>  
                    </div>  
                    <div style="display: flex; align-items: center;">  
                        <el-button :icon="money" style="font-size: 36px;"></el-button>  
                        <h5 style="margin-left: 8px;  font-size: 18px;">超1k免十年物业费</h5>  
                    </div>  
                    <div style="display: flex; align-items: center;">  
                        <el-button :icon="dunPai" style="font-size: 36px;"></el-button>  
                        <h5 style="margin-left: 8px;  font-size: 18px;">官方售后 社区管保</h5>  
                    </div>  
            </div>
        </div>  

    </div>

    <div class="bottom-bottom">

        <div class="bottomMiddle">
            <div class="bottomMiddleContent">
                <div class="bLeft">
                    <div v-for="(section, index) in sections" :key="index" class="section">
                        <p>{{ section.title }}</p>
                        <div v-for="(item, itemIndex) in section.data" :key="itemIndex">
                            <a :href="urls[index][itemIndex]">{{ item }}</a>
                        </div>
                    </div>
                            
                </div>
                
                
                <div class="bRight">
                    <div style="display: flex;">
                        <el-button :icon="phone2" style="font-size :24px"></el-button>
                        
                            <p style="font-size: x-large; margin-left:10px">
                            9-12306+1
                            </p>
                    </div>
                      
                            <p style="font-size: small;" >
                                8 x 25 小时客服热线
                            </p>
                            <p>
                                ( 仅收村话费 )
                            </p>              
                            
                      
                        <div class="service">
                            <el-button id="meizhaole" :icon="service"  
                            color="black"

                            style="padding: 10px;
                            width: 100%; 
                            margin-top:10px">
                                在线客服
                            </el-button>
                        </div> 
                </div>

                
                

            </div>
        </div>
        
    </div>
<!-- 下面我有想法 -->

    <div class="bottom-footer">
            <div class="bottomFooterContent">
                <div class="bottomFooterImage">
                    <el-image src="../../../public/images/Logo/FBLogo.jpg"></el-image>
                </div>
                <div class="bottomFooterContent-middle">
                    <div class="middle-first"> 
                        <ul class="first">
                            <!-- 比下略深 浅小字 -->
                            <li><a href="">未来蜂集团</a></li>
                            <li><a href="">消费者业务网站</a></li>
                            <li><a href="">FutureBeeOs</a></li>
                            <li><a href="">未来蜂云空间</a></li>
                            <li><a href="">开发者平台</a></li>
                         <!-- xxx是咱们平台名 -->   <li><a href="">XXx手机版</a></li>
                            <li style="list-style: none;color: red; border: 0; margin-left: 5px;">本页内容仅限学习，如有侵权请联系作者删除。</li>
                        </ul>

                    </div>
                    <div class="middle-second">
                        <a href="">隐私政策</a>
                        &nbsp;
                        <a href="">服务协议</a>
                        &nbsp;
                        <a href="">COOKIES </a>
                    
                        <span>Copyright © 2012-2024 未来蜂有限公司 版权所有</span>
                        <a href="">| 经营资质 |</a>
                        <a href="">津ICP备XXXXXXXX号 |</a>
                        <a href="">津公网安备xxxxxxxxxxxxxx号</a>
                    </div>

                    <div class="middle-third">
                        <a href="">增值电信业务经营许可证: 津X2-202513XX |</a>
                        <a href="">备案主体编号: XX2025XX1332XX |</a>
                        <a href="">津新出网备（2025）X号 |</a>
                        <a href="">（津）网械平台备字[2025]第000xX号</a>
                    </div>

                    <div class="middle-fourth">
                        <a href="">互联网XX信息服务资格证（津）-非经营性-2025-XXXX |</a>
                        <a href="">天津市xXXXXx第三方平台备案:XXXXXXXX8  |</a>
                        <a href=""> APP备案号: 津ICP备XXXXXXXX号-xxY号</a>
                    </div>

                    <div class="middle-fifth">
                        <a href="">网信算备XXXXXXXXXXXXXXXX6XX号</a>
                        <a href=""> | 网信算备XXXXXXXXXXXXXXXXXX3号</a>
                    </div>

                </div>

                <div class="bottomFooter-right">
                    <el-image src="../../../public/images/Logo/CORPORATE_ENTITY_BUSINESS_LICENSE.png">

                    </el-image>
                </div>
               
            </div>            
         </div>
</template>

<script setup>
import jinPai from '@/components/footerIconsByLzm/lzm-icons/jinpai.vue'
import dunPai from '@/components/footerIconsByLzm/lzm-icons/dunpai.vue'
import money from '@/components/footerIconsByLzm/lzm-icons/money.vue'
import phone1 from '@/components/footerIconsByLzm/lzm-icons/phone1.vue'
import phone2 from '@/components/footerIconsByLzm/lzm-icons/phone2.vue'
import service from '@/components/footerIconsByLzm/lzm-icons/service.vue'

import { ref } from 'vue'

 // Title data
 const title = ref([
   '购物指南',
   '售后服务',
   '服务支持',
   '特色服务',
   '关于我们',
   '友情链接'
 ]);
 
 // Data arrays
 const data = ref([
   ['先用后付', '以旧换新', '众测活动', '企业购', 'O2O采购', '教育优惠'],
   ['保修政策', '防伪查询', '寄修服务', '门店维修', '寄取服务'],
   ['上门安装', '服务店查询', '问题排查'],
   ['防伪查询', '家政服务', '上门按摩', '上门搓澡'],
   ['公司介绍', '意见反馈', '车位保护', '上门记录', '身体状况'],
   ['东软集团', '华威', '百度之登']
 ]);
 
 // Generate URLs for each item in data
 const urls = ref([
   ['#shopping-guide1', '#shopping-guide2', '#shopping-guide3', '#shopping-guide4', '#shopping-guide5', '#shopping-guide6'],
   ['#after-sale1', '#after-sale2', '#after-sale3', '#after-sale4', '#after-sale5'],
   ['#service-support1', '#service-support2', '#service-support3'],
   ['#special-service1', '#special-service2', '#special-service3', '#special-service4'],
   ['#about-us1', '#about-us2', '#about-us3', '#about-us4', '#about-us5'],
   ['#links1', '#links2', '#links3']
 ]);
 
 // Combine title and data into a single structure
 const sections = ref(title.value.map((t, i) => ({
   title: t,
   data: data.value[i]
 })));

</script>

<style scoped lang="scss">
    *{
  border: 0;
  padding:0;
  box-sizing: border-box;
}  
a{
    list-style: none;
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素的字体颜色 */
    font-weight: normal; /* 去掉粗体 */
    font-style: normal; /* 去掉斜体 */
}
.buttonFather{
    color: rgb(0, 0, 0);
    .el-button:hover{
 background-color: white ;
 color: currentColor;
}
}
    .bottom-top{
        height: 102px;
        padding-left: 12%;
        padding-right:11%;
       

        
    }
    .bottom-bottom{
        padding-left: 12%;
        padding-right:11%;
    }

.bottomMiddle{
    height: 309px;
    padding-top: 56px;
    padding-bottom: 40px;
    border-bottom:0.667px rgba(0, 0, 0, 0.105) solid;
    border-top:0.667px rgba(0, 0, 0, 0.105) solid;
  /*   background-color: rgb(215, 249, 250); */
    .bottomMiddleContent{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
/*      background-color:black ;     */
        .bLeft{
           /*  width: 952px; */
            //159 793
            width:952px;            
            display: flex;
            justify-content: space-between;
            position: relative;
            .leftRight{
                margin-right: 30px;
            }

                .section {
                    margin-bottom: 20px;
                    display: flex;
                    flex-direction: column;
                    
                    align-items: center;
                    }
                    a{
                        color: rgba(0, 0, 0, 0.5);
                        text-decoration: none; /* 去掉下划线 */
                        color: inherit; /* 继承父元素的字体颜色 */
                        font-weight: normal; /* 去掉粗体 */
                        font-style: normal; /* 去掉斜体 */
                        font-size: smaller;
                    }
                    a:hover{
                        color:red;
                    }
                    p {
                    font-size: 14px;
                    color: #000;
                    margin-bottom:32px; 
                    }                 
            }
        }
        .bRight{
            width: 248px;
            border-left:0.667px rgba(0, 0, 0, 0.105) solid;
            padding-left: 60px;
            }     
    }
.bottom-footer{
    height: 167.5px;
    padding-top: 33.5px;
    padding-bottom: 40px;
    border: 0px solid black;
    padding-left: 12%;
    padding-right:11%;
}
    a:hover{
        color:red;
    }
  
    
    .bottomFooterContent{
        height: 100%;
        width: 100%;
        display: flex;
        margin: 20px;
    
        .bottomFooterContent-middle{
            font-size: 12px;
            color: rgba(0, 0, 0, 0.4);
        }
            .middle-first{
                display: flex;
                justify-content:space-between;
                .first{
                    display: flex;
                    list-style: none;
                    height:17px;
                    font-size: 12px;
                    margin-top:-5px;
                    margin-bottom: 6px;
                    color: rgba(0, 0, 0, 0.6);
                    li{
                        padding-right: 10px;
                        border-right: 0.667px  rgba(0, 0, 0, 0.205) solid;
                        margin-right:2px;
                    }
                }     
            }

         .bottomFooter-right{
            margin-left:100px;
            border: 0;
         }   
        .bottomFooterImage{
            height: 70px;
            width: 130px;
            .el-image{
                height: 100%;
            }
        }
      
    }

</style>